<template>
  <div class="wrong-scan-container">
    <Breadcrumb>
      <template #bread-name>错题反扫</template>
      <template #bread-right>
        <div class="select-box flex">
          <ClassSelector
            v-model:currentClass="search.currentClass"
            :isClassDefault="true"
            :defaultClass="search.currentClass.slice(0, 2)"
          />
          <el-select
            v-model="search.stageOption"
            style="width: 120px"
            :disabled="true"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            v-model="search.timeRange"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :disabled-date="disabledDate"
            :clearable="true"
            @change="onChangeTime"
          />
        </div>
      </template>
    </Breadcrumb>
    <main class="scan-content">
      <div class="tab-list flex">
        <div
          @click="activeTab = tab.value"
          :class="[
            'tab-item',
            'hover',
            tab.value === activeTab && 'tab-item-active'
          ]"
          v-for="(tab, index) in tabList"
          :key="index"
        >
          {{ tab.label }}
        </div>
      </div>
      <div class="tab-content">
        <component
          :is="tabList[activeTab].cpn"
          :currentClass="search.currentClass"
          :stageId="nowGlobalStageId"
          :subjectId="nowGlobalSubjectId"
          :startTime="search.timeRange ? search.timeRange[0] : null"
          :endTime="search.timeRange ? search.timeRange[1] : null"
          :teacherId="userInfo.userId"
        />
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, shallowRef, onMounted, onBeforeUnmount, computed } from 'vue'
import Breadcrumb from '@/components/Breadcrumb.vue'
import ClassSelector from '../components/ClassSelector.vue'
import { useAuthStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { subjectMap, gradeMap } from '@/constants/subject-map'
import RetrainStatistics from './RetrainStatistics.vue'
import WrongCorrection from './WrongCorrection.vue'
import CommonWrong from './CommonWrong.vue'
import dayjs from 'dayjs'

const { nowGlobalStageId, nowGlobalSubjectId, userInfo } =
  storeToRefs(useAuthStore())
const options = computed(() => [
  {
    value: '1',
    label: `${gradeMap[nowGlobalStageId.value]}${subjectMap[nowGlobalSubjectId.value]}`
  }
])

const search = ref({
  currentClass: [],
  stageOption: options.value[0].value,
  timeRange: []
})

const tabList = ref([
  {
    value: 0,
    label: '重练统计',
    cpn: shallowRef(RetrainStatistics)
  },
  {
    value: 1,
    label: '错题本订正',
    cpn: shallowRef(WrongCorrection)
  },
  {
    value: 2,
    label: '共性错题',
    cpn: shallowRef(CommonWrong)
  }
])
const activeTab = ref(tabList.value[0].value)
const disabledDate = time => {
  return time.getTime() > Date.now()
}

onMounted(() => {
  let param = localStorage.getItem('wrongScanSearch')
  if (param) {
    param = JSON.parse(param)
    activeTab.value = param.tab
    search.value.currentClass = param.currentClass
    search.value.timeRange = [
      new Date(param.timeRange[0]),
      new Date(param.timeRange[1])
    ]
    localStorage.removeItem('wrongScanSearch')
  }
})
onBeforeUnmount(() => {
  let param = {
    tab: activeTab.value,
    currentClass: search.value.currentClass,
    timeRange: search.value.timeRange
  }
  localStorage.setItem('wrongScanSearch', JSON.stringify(param))
})

const onChangeTime = param => {
  if (!param) {
    initData()
  }
}
const initData = () => {
  search.value.timeRange = [
    new Date(dayjs().subtract(1, 'month').startOf()),
    new Date(dayjs().startOf())
  ]
}
initData()
</script>

<style lang="less" scoped>
.wrong-scan-container {
  margin-bottom: 20px;
  .select-box {
    gap: 20px;
  }
  .scan-content {
    height: 100%;
    .tab-list {
      margin: 20px 0;
      gap: 30px;
      .tab-item {
        color: #72757e;
      }
      .tab-item-active {
        color: #333333;
        font-weight: bold;
        font-size: 20px;
      }
    }
  }
}
</style>
